<template>
  <view>
    <view v-for="item in data" :key="item[value]" @click.stop="item.open = !item.open">
      <view class="t-row" :style="{ paddingLeft: depth * 15 + 'px' }">
        <view class="flex items-center">
          <image
            v-if="item[child] && item[child].length"
            class="arrow-icon"
            :class="{ open: item.open }"
            src="/static/images/locate/arrow.png"
          ></image>
          <view class="flex-auto title-td">{{ item[label] }}</view>
          <view class="p-td mr-20">{{ item.count ? item.count.personnelCount : 0 }}</view>
          <view class="p-td">{{ item.count ? item.count.carCount : 0 }}</view>
        </view>
      </view>

      <view class="tree-container" v-if="item.open">
        <cu-tree
          :depth="depth + 1"
          v-if="item[child] && item[child].length"
          :label="label"
          :value="value"
          :child="child"
          :data="item[child]"
        ></cu-tree>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'cu-tree',

  props: {
    depth: {
      type: Number,
      default: 1
    },
    data: Array,
    child: String,
    label: String,
    value: String
  }
}
</script>

<style lang="scss" scoped>
.p-td {
  width: 80rpx;
  flex-grow: 0;
}

.t-row {
  background: #f3f4f8;
  font-size: 15px;
  color: #333333;
  padding: 10px 15px;
  margin-bottom: 6rpx;
}

.arrow-icon {
  width: 21rpx;
  height: 24rpx;
  margin-right: 10rpx;
  &.open {
    transform: rotate(90deg);
  }
}

.tree-container {
  //padding-left: 40rpx;
}
</style>
